<template lang="pug">

.movieBar

    .movie_content(v-show="movies.length>0" )
        .movie_play
            video.highlight_movie.highlight_player_item(:src="movies[PlayIndex].webm[definition]" autoplay=true controls="true" muted="true")
        .movie_thumbnail
            span(v-for="(item,index) in movies" @click="ClickToPlay(index)" @dblclick="DbClick(index)")
                img(:src="item.thumbnail")
                .highlight_movie_marker
    .movie_img
        img(:src="movies[PlayIndex].thumbnail")
        span video Img

</template>


<script setup lang="ts">


import type {PropType} from "vue";
import {ref} from "vue";
import {StoreSearchKeyWord} from "../../store";
import type {Movie} from "../../utils/types/Game";

const store = StoreSearchKeyWord()
const props = defineProps({
    movies: {
        type: Object as PropType<Movie[]>,
        required: false,
    },
})

const PlayIndex = ref(0)
const definition = ref('480')
const ClickToPlay = (index: number) => {
    setTimeout(() => {
        definition.value = '480'
        PlayIndex.value = index
    }, 500)
}
const DbClick = (index: number) => {
    setTimeout(() => {
        definition.value = 'max'
        PlayIndex.value = index
    }, 500)
}

</script>
<style scoped lang="sass">
@import "../../assets/sass/utils/movieBar.sass"

</style>
